import React from "react";
import { Spin } from "antd";
import FBMain from "./FBMain";
import { observer } from 'mobx-react';
import { Consumer } from "../theme";
import { WeaNewScroll } from "ecCom";
import { findDOMNode } from "react-dom";
import FooterView from '../component/footer/Design';
import "./index.less";

@observer
export default class MainContent extends React.Component {
  static defaultProps = {
    store: {}
  };

  state = {
    container: null
  };

  componentDidMount() {
    this.setState({
      container: findDOMNode(this.container)
    });
  }

  render() {
    const { container } = this.state;
    const { components, footer, onSelectedIdChange } = this.props.store;
    const spining = !components || !container; // container为空时 FBMain无法计算minHeight

    return (
      <Consumer ecId={`${this && this.props && this.props.ecId || ''}_Consumer@5wdwds`}>
        {({ background, form }) => (
          <div className='ef-center'>
            <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@jo5w27`} height='100%'>
              <div className='wea-edc-form-main' style={background.css} ref={container => this.container = container}>
                {spining ? <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@7bq4us`} spining={spining} /> :
                  <FBMain ecId={`${this && this.props && this.props.ecId || ''}_FBMain@adrawp`} 
                    form={form} 
                    container={container} 
                    store={this.props.store} 
                  />
                }
                <FooterView ecId={`${this && this.props && this.props.ecId || ''}_FooterView@o0nww4`}
                  data={footer ? footer.config : ''}
                  onClick={() => onSelectedIdChange(footer.uuid)}
                />
              </div>
            </WeaNewScroll>
          </div>
        )}
      </Consumer>
    );
  }
}